<template>
  <nav>
    <van-nav-bar title="Alex Tools" :border="false" />
  </nav>

  <main>
    <component
      :is="components[currentComponent]"
      :changeComponent="changeComponent"
    />
  </main>

  <van-floating-bubble
    axis="xy"
    icon="chat"
    magnetic="x"
    @click="changeComponent('Home')"
    v-if="currentComponent !== 'Home'"
  />
</template>

<script setup>
import { ref } from 'vue';

import Home from './features/home/Home.vue';
import Temperature from './features/temperature/Temperature.vue';

const currentComponent = ref('Home');
const components = {
  Home,
  Temperature,
};

function changeComponent(componentName) {
  currentComponent.value = componentName;
}
</script>

<style scoped>
main {
  margin-top: 8rem;
}
</style>

<!-- <script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <header>
    <div>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template> -->
